<template>
  <div class="userSide-container">
    <div class="org-name-content">
      公司组织架构
    </div>
    <div class="org-tree-content">
      <el-input
        class="org-search"
        placeholder="输入关键字进行过滤"
        v-model="filterText">
      </el-input>
      <el-tree
        ref="orgTree"
        node-key="id"
        class="filter-tree org-tree"
        :data="orgDeptData"
        :props="defaultProps"
        :default-expanded-keys="['0']"
        :filter-node-method="filterNode"
        highlight-current
        @node-click="nodeClick"
        >
      </el-tree>
    </div>
  </div>
</template>

<script>
import {deptData} from '@/mock/jsModule/system'

export default {
  name: 'userSide',
  data(){
    return{
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'deptName',
        value:'id',
      },
      expandKey: '',
      currentKey: '',
    }
  },
  computed:{
    orgDeptData(){
      return deptData
    }
  },
  mounted () {
    this.$nextTick(()=>{
      //默认选中,通过 key 设置某个节点的当前选中状态，给选中的节点添加类名 is-current
      this.$refs['orgTree'].setCurrentKey('0-0');
      this.$emit('sendToDept',this.orgDeptData[0].children[0].deptName)
    })
  },
  methods:{
    filterNode(){

    },
    nodeClick(data){
      this.$emit('sendToDept',data.deptName)
    },
  }
}
</script>

<style lang="scss" scoped>
.userSide-container{
  width: 220px;
  height: 100%;
  border-right: 1px solid #c3cfd7;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
.org-name-content{
  height: 50px;
  width: 214px;
  background: #fff;
  line-height: 50px;
  color: #065385;
  font-weight: 600;
  position: fixed;
  z-index: 5;
  border-bottom: 1px solid #ececec;
}
.org-tree-content{
  margin-top: 60px;
}
.org-search{
  margin-top: 10px;
}
</style>
<style lang="scss">
.org-search{
  .el-input__inner{
    height: 30px;
    width: 218px;
    margin: 0 auto;
  }
}
</style>
